<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchList">
        <a-row :gutter="48">
          <a-col :md="8" :sm="4">
            <a-form-item label="广告名称">
              <a-input v-model="queryParam.title" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="广告位">
              <a-select v-model="queryParam.place" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="">不限</a-select-option>
                <a-select-option :value="item.value" v-for="(item, index) in advertLoc" :key="index">{{ item.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="跳转类型">
              <a-select v-model="queryParam.skipType" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="">不限</a-select-option>
                <a-select-option :value="item.value" v-for="(item, index) in advertJumpUrl" :key="index">{{ item.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="投放平台">
              <a-select v-model="queryParam.platform" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="1">小程序</a-select-option>
                <a-select-option value="2">导购</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
              <a-button type="primary" @click="searchList">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
              <a-button type="primary" style="margin-left: 8px" icon="plus" @click="handleAdd">新建</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-tabs :activeKey="queryParam.status" @change="tabsChange">
      <a-tab-pane :key="1" :tab="`进行中`"></a-tab-pane>
      <a-tab-pane :key="0" :tab="`未开始`" forceRender></a-tab-pane>
      <a-tab-pane :key="2" :tab="'已结束'" forceRender></a-tab-pane>
    </a-tabs>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1300 }">
      <span slot="imgUrl" slot-scope="text">
        <img :src="text" alt="" class="img-url" />
      </span>
      <span slot="place" slot-scope="text">{{ place(text, advertLoc) }}</span>
      <span slot="skipType" slot-scope="text">{{ skipType(text, advertJumpUrl) }}</span>
      <span slot="timeRank" slot-scope="text, record"> {{ record.beginTime }}<br />{{ record.endTime }} </span>
      <span slot="action" slot-scope="text, record">
        <template>
          <template v-if="queryParam.status == 2">
            <a @click="handleEdit(record)">继续投放</a>
          </template>
          <template v-else>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定上线吗?" ok-text="Yes" cancel-text="No" @confirm="handleEnable(record, 1)" v-if="queryParam.status == 0">
              <a href="#">上线</a>
            </a-popconfirm>
            <a-popconfirm title="确定下线吗?" ok-text="Yes" cancel-text="No" @confirm="handleEnable(record, 0)" v-if="queryParam.status == 1">
              <a href="#">下线</a>
            </a-popconfirm>

            <!-- <template v-if="queryParam.status == 0">
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" ok-text="Yes" cancel-text="No" @confirm="handleDelete(record)">
                <a href="#">删除</a>
              </a-popconfirm>
            </template> -->
          </template>
        </template>
      </span>
    </s-table>
  </a-card>
</template>
<script>
import { STable } from '../../components'
import { advertList, advertCreateOrUpdate } from '@/api/box/marketing'
import { initDictOptions, filterDictText } from '@/components/dict/JDictSelectUtil'

const columns = [
  { title: '广告图', width: 200, dataIndex: 'imgUrl', fixed: 'left', align: 'center', scopedSlots: { customRender: 'imgUrl' } },
  { title: '投放平台', dataIndex: 'platform', align: 'center', customRender: text => (text == 1 ? '小程序' : '导购') },
  { title: '广告名称', dataIndex: 'title', align: 'center' },
  { title: '广告位', dataIndex: 'place', align: 'center', scopedSlots: { customRender: 'place' } },
  { title: '跳转类型', dataIndex: 'skipType', align: 'center', scopedSlots: { customRender: 'skipType' } },
  { title: '落地页', dataIndex: 'skipUrl', align: 'center' },
  { title: '排序值', dataIndex: 'priority', align: 'center' },
  { title: '投放时间', width: 200, align: 'center', scopedSlots: { customRender: 'timeRank' } },
  { title: '创建时间', dataIndex: 'createTime', align: 'center' },
  { title: '操作', fixed: 'right', width: 150, align: 'center', scopedSlots: { customRender: 'action' } }
]
export default {
  components: {
    STable
  },
  data() {
    return {
      columns,
      // 查询条件参数
      queryParam: {
        status: 1,
        place: '',
        skipType: ''
      },
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchData(parameter),
      running: 0,
      wait: 0,
      advertLoc: [],
      advertJumpUrl: []
    }
  },
  computed: {
    place(value, advertLoc) {
      return (value, advertLoc) => {
        let result = advertLoc.filter(e => e.value == value)
        return result.length > 0 ? result[0].text : value
      }
    },
    skipType(value, advertJumpUrl) {
      return (value, advertJumpUrl) => {
        let result = advertJumpUrl.filter(e => e.value == value)
        return result.length > 0 ? result[0].text : value
      }
    }
  },
  watch: {
    $route(to, from) {
      let currentPath = '/operations/advertisement/list'
      let detailPath = '/operations/advertisement/edit'
      if (to.path.includes(currentPath) && from.path.includes(detailPath)) {
        this.$refs.table.refresh()
      } else {
        if (from.path.includes(currentPath) && !to.path.includes(detailPath)) {
          //  重置页面
          console.log('******destroy*******')
          this.$destroy()
        }
        /* if (to.path.includes(currentPath) && !from.path.includes(detailPath)) {
          this.$refs.table.refresh(true)
        } */
      }
    }
  },
  mounted() {
    this.initDictConfig()
  },
  methods: {
    tabsChange(key) {
      this.queryParam.status = key
      this.$refs.table.refresh(true)
    },
    // 初始化字典
    initDictConfig() {
      //初始化字典 - 广告位
      initDictOptions('advert_loc').then(res => {
        if (res.success) {
          this.advertLoc = res.result
        }
      })
      initDictOptions('advert_jump_url').then(res => {
        if (res.success) {
          this.advertJumpUrl = res.result
        }
      })
    },
    handleAdd() {
      this.$router.push('/box/operations/advertisement/edit/add')
    },
    handleEdit(record) {
      this.$router.push(`/box/operations/advertisement/edit/${record.id}`)
    },
    handleEnable(record, type) {
      record.status = type
      const data = {
        requestData: {
          status: type,
          id: record.id
        }
      }
      advertCreateOrUpdate(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success(res.msg)
            this.$refs.table.refresh()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('submitCreate:' + err)
        })
    },
    handleDelete(record) {},
    searchList() {
      this.$refs.table.refresh(true)
    },
    resetList() {
      this.queryParam.title = ''
      this.queryParam.place = ''
      this.queryParam.platform = ''
      this.$refs.table.refresh(true)
    },
    fetchData(parameter) {
      let formValue = JSON.parse(JSON.stringify(this.queryParam))
      for (let key in formValue) {
        if (formValue[key] == null || formValue[key] == undefined || formValue[key] === '') {
          delete formValue[key]
        }
      }
      let params = {
        page: parameter,
        requestData: formValue
      }
      return advertList(params).then(res => {
        if (res.code == 0) {
          return { data: res.data, page: res.page }
        } else {
          this.$message.warning(res.msg)
          return {
            data: [],
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            }
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.img-url {
  height: 100px;
  width: 150px;
  object-fit: contain;
}
</style>

